<app-layout [bannerBg]="bannerBg">
  <app-my-breadcrumb [breadcrumbData]="breadcrumbData" [breadType]="1"></app-my-breadcrumb>

  <div class="nav">
    <div>
      <div @myNavAnimation class="nav-container" *ngFor="let nav of navList">
        <app-left-line 
          [width]="4" 
          [height]="20" 
          [background]="'linear-gradient(0deg, #06C6DE 0%, #005DE7 100%)'" [fontSize]="'20px'" [fontWeight]="'500'"
          [text]="nav.sortName">
        </app-left-line>
    
        <ul class="nav-list">
          <li class="nav-item" *ngFor="let func of nav.funcs"
            (mouseenter)="onMouseEnter($event)"
            (mouseleave)="onMouseLeave($event)"
            (click)="doNavigate(func, nav)"
          >
            <img class="func-icon" [src]="func.iconPath | iconPath" alt="">
            <div class="nav-item-text">
              <p class="main">{{ func.funcName }}</p>
              <p class="sub">{{ func.funcDescribe }}</p>
            </div>
          </li>
        </ul>

      </div>
    
      <nz-skeleton [nzActive]="true" *ngIf="navList.length <= 0 && skeleton" style="margin: 24px auto;"></nz-skeleton>
    </div>
  </div>
</app-layout>